<template>
  <div class="groupEditing">
    <el-drawer
      size="40%"
      title="事件分组管理"
      :modal="false"
      :visible.sync="drawer_bool"
      :with-header="false"
    >
      <div class="groupEditingBox" v-loading="waiting">
        <header>
          <span class="til">事件分组管理</span>
          <i @click="showHidden(false)" class="el-icon-close"></i>
        </header>
        <section>
          <template v-if="groupingData&&groupingData.length>0">
            <div v-for="_i in groupingData" :key="_i.id" class="groupLine">
              <div class="grouphead">
                <i
                  v-if="_i.mateEventList&&_i.mateEventList.length>0"
                  @click="openClose(_i)"
                  class="el-icon-arrow-right"
                  :style="{transform:openRotate(_i)}"
                ></i>
                <i v-else class="el-icon-arrow-right"></i>
                <span v-if="!nameIndex||nameIndex.id!==_i.id" class="main">{{_i.groupName}}</span>
                <el-input
                  v-if="nameIndex&&nameIndex.id==_i.id&&editBool&&_i.appId!=0"
                  class="editname"
                  size="small"
                  v-model="nameTxt"
                  placeholder="请输入内容"
                ></el-input>
                <i
                  v-if="editBool&&nameIndex&&nameIndex.id!==_i.id&&_i.appId!=0"
                  @click="nameIndexChange(_i)"
                  class="el-icon-edit-outline"
                ></i>
                <el-button
                  @click="updatebyname(_i)"
                  v-if="nameIndex&&nameIndex.id==_i.id&&editBool&&_i.appId!=0"
                  class="saveTXT"
                  type="text"
                >保存</el-button>
                <el-button
                  @click="nameIndexChange(_i)"
                  v-if="nameIndex&&nameIndex.id==_i.id&&editBool&&_i.appId!=0"
                  class="saveTXT"
                  type="text"
                >取消</el-button>
                <span  class="mini">
                  {{_i.mateEventList?_i.mateEventList.length:0}}
                  项
                </span>
                <template v-if="editBool">
                  <i
                    @click="delsure(_i)"
                    class="el-icon-delete"
                    v-if="_i.mateEventList&&_i.mateEventList.length==0&&nameIndex.id!==_i.id&&_i.appId!=0"
                  ></i>
                  <template v-else>
                    <el-tooltip
                      v-if="nameIndex.id!==_i.id&&_i.appId!=0"
                      class="item"
                      effect="dark"
                      content="删除前需将事件列表移出"
                      placement="top-start"
                    >
                      <i class="el-icon-delete"></i>
                    </el-tooltip>
                  </template>
                </template>
              </div>
              <div
                class="groupSectiion"
                :style="{
                height: openList(_i)
              }"
              >
                <span class="section" v-for="_is in _i.mateEventList" :key="_is.id">
                  <el-checkbox-group v-if="editBool&&_i.appId!=0" v-model="checkList">
                    <el-checkbox :label="_is.eventId">{{_is.eventName}}</el-checkbox>
                  </el-checkbox-group>
                  <div class="center" v-else>{{_is.eventName}}</div>
                  <!-- <div class="left" v-if="editBool">
                    <el-checkbox></el-checkbox>
                  </div>
                  <div class="right">{{_is.name}}</div>-->
                </span>
              </div>
            </div>
          </template>
          <!-- 添加分组 -->
          <div class="groupLine" v-if="addGroupBool&&editBool">
            <div class="grouphead">
              <i class="el-icon-arrow-right"></i>
              <el-input v-model="addGroupTXT" class="editname" size="small" placeholder="请输入内容"></el-input>
              <el-button @click="addGroupSave" class="saveTXT" type="text">保存</el-button>
              <i @click="addGroupBool = false" class="el-icon-delete deleteAdd"></i>
            </div>
          </div>
        </section>
        <footer>
          <span
            :style="{color:addGroupBool?'gray':'',cursor:addGroupBool?'not-allowed':''}"
            @click="addGroupFun"
            v-if="editBool"
            class="total_screen"
          >
            <i class="el-icon-plus"></i>
            添加分组
          </span>

          <el-dropdown @command="moveGroup" v-if="editBool" class="total_screen">
            <span class="el-dropdown-link">
              <i class="el-icon-rank"></i>
              移动至分组
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="_i"
                v-for="_i in groupingDataComputed"
                :key="_i.id"
              >{{_i.groupName}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            class="btn"
            @click="editBool = false"
            v-if="editBool"
            size="mini"
            plain
            type="primary"
          >取消</el-button>
          <el-button
            v-if="!editBool"
            @click="showHidden(false)"
            class="btn"
            size="mini"
            type="primary"
            plain
          >返回</el-button>
          <el-button class="btn" @click="startEdit" v-if="!editBool" size="mini" type="primary">编辑</el-button>
        </footer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import analysisApi from "@/utils/api/analysisApi.js";
export default {
  name: "groupEditing",
  props: {},
  watch: {
    drawer_bool: {
      handler(newValue) {
        if (!newValue) {
          this.$emit("change");
        } else {
          this.waiting = false;
          this.nameIndexChange({});
          this.editBool = false;
        }
      },
      deep: true
    }
  },
  components: {},
  data() {
    return {
      waiting: false, // 异步阻断变量
      checkList: [], // 多选变量
      addGroupBool: false, //  分组添加
      addGroupTXT: "",
      nameTxt: "",
      nameIndex: {}, // 当前修改的分组名称下标
      openIndex: [], // 展开分组下标
      editBool: false, //
      groupingData: [],
      drawer_bool: false
    };
  },
  methods: {
    // 删除分组函数
    async delsure(item) {
      if (this.waiting) {
        return;
      }
      try {
        this.waiting = true;
        let res = await analysisApi.eventAnalysis.eventGroupDelete({
          id: item.id
        });
        this.waiting = false;
        if (res&&res.success) {
          this.nameIndexChange({});
          this.queryAll();
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 分组名称修改
    async updatebyname(item) {
      if (this.waiting) {
        return;
      }
      try {
        this.waiting = true;
        let res = await analysisApi.eventAnalysis.eventGroupUpdatebyname({
          id: item.id,
          groupName: this.nameTxt
        });
        this.waiting = false;
        if (res&&res.success) {
          this.nameIndexChange({});
          this.queryAll();
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 点击编辑触发函数
    startEdit() {
      this.waiting = false;
      this.checkList = [];
      this.addGroupBool = false;
      this.addGroupTXT = "";
      this.nameTxt = "";
      this.nameIndex = {};
      this.editBool = true;
    },
    // 点击移动分组调用的函数
    async moveGroup(item) {
      if (this.waiting) {
        return;
      }
      try {
        this.waiting = true;
        let res = await analysisApi.eventAnalysis.eventGroupMobile({
          eventIds: this.checkList,
          groupId: item.id
        });
        this.waiting = false;
        if (res&&res.success) {
          this.queryAll();
          this.checkList = [];
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 点击添加分组调用的函数
    addGroupFun() {
      this.nameIndex = {};
      this.nameTxt = "";
      this.addGroupBool = true;
    },
    // 添加分组保存
    async addGroupSave() {
      this.addGroupBool = false;
      if (this.waiting) {
        return;
      }
      try {
        this.waiting = true;
        let res = await analysisApi.eventAnalysis.eventGroupAdd({
          appId: this.appId,
          groupName: this.addGroupTXT
        });
        this.waiting = false;
        if (res&&res.success) {
          this.nameTxt = "";
          this.queryAll();
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 点击编辑分组名称调用的函数
    nameIndexChange(item) {
      try {
        if (
          this.nameIndex &&
          this.nameIndex.id &&
          this.nameIndex.id == item.id
        ) {
          this.nameIndex = {};
          this.nameTxt = "";
        } else {
          this.addGroupBool = false;
          this.nameIndex = JSON.parse(JSON.stringify(item));
          this.nameTxt = item.groupName;
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 分组展开关闭函数
    openClose(item) {
      let bool = false;
      let index = "undF";
      try {
        this.openIndex.map((_is, _ins) => {
          if (_is.id === item.id) {
            bool = true;
            index = _ins;
          }
        });
        if (bool && index !== "undF") {
          this.openIndex.splice(index, 1);
        } else {
          this.openIndex.push(JSON.parse(JSON.stringify(item)));
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    openList(item) {
      let bool = false;
      try {
        this.openIndex.map(_i => {
          if (_i.id === item.id) {
            bool = true;
          }
        });
        if (!bool) {
          return "0rem";
        } else {
          return Math.ceil(item.mateEventList.length / 3) * 0.8 + 0.2 + "rem";
        }
      } catch (err) {
        console.log(err, "错误");
        return "0rem";
      }
    },
    openRotate(item) {
      let str = "rotate(0deg)";
      try {
        this.openIndex.map(_i => {
          if (_i.id === item.id) {
            str = "rotate(90deg)";
          }
        });
      } catch (err) {
        console.log(err, "错误");
      }
      return str;
    },
    showHidden(bool = true) {
      this.drawer_bool = bool;
    },
    // 查询全部分组函数
    async queryAll() {
      let res = await analysisApi.eventAnalysis.eventGroupQuery({
        appId: this.appId
      });
      if (res&&res.success) {
        this.groupingData = res.value;
      } else {
        this.groupingData = [];
      }
    }
  },
  beforeCreate() {},
  created() {
    this.queryAll();
  },
  beforeMount() {},
  mounted() {},
  computed: {
    groupingDataComputed() {
      return this.groupingData.filter(_i => {
        return _i.appId != 0;
      });
    },
    appId() {
      return this.$store.state.global.appId;
    }
  }
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
// 抽屉壳子元素
.groupEditingBox {
  section {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.95rem;
    bottom: 0.9rem;
    overflow-y: scroll;
    cursor: pointer;
    .groupLine {
      width: 100%;
      margin: 0.1rem auto;
      border-bottom: 1px solid rgba($color: #dcdfe6, $alpha: 0.6);
      .grouphead {
        width: 99%;
        cursor: pointer;
        height: 0.6rem;
        display: flex;
        position: relative;
        align-items: center;
        i {
          font-size: 0.26rem;
          transition: all 0.5s ease;
          font-weight: 800;
        }
        .main {
          font-size: 0.24rem;
          letter-spacing: 2px;
          display: inline-block;
          height: 100%;
          line-height: 0.55rem;
          font-weight: 600;
        }
        .editname {
          width: 4rem;
        }
        .mini {
          font-size: 0.1rem;
          display: inline-block;
          height: 100%;
          margin: 0 0 0 0.2rem;
          line-height: 0.6rem;
        }
        .el-icon-arrow-right {
          margin: 0 0.1rem;
        }
        .el-icon-edit-outline {
          color: rgba($color: #307ef2, $alpha: 1);
          margin: 0 0.2rem;
          display: none;
        }
        .el-icon-delete {
          color: rgba($color: #307ef2, $alpha: 1);
          position: absolute;
          right: 0.2rem;
          display: none;
        }
        .deleteAdd {
          display: block;
        }
        .saveTXT {
          font-weight: 600;
          margin: 0 0.2rem;
          font-size: 0.2rem;
          color: rgba($color: #307ef2, $alpha: 1);
        }
      }
      .grouphead:hover {
        background: rgba($color: #f2f6fc, $alpha: 0.9);
        .el-icon-edit-outline,
        .el-icon-delete {
          display: block;
        }
        .mini {
          display: none;
        }
      }
      .groupSectiion {
        width: 99%;
        margin: 0 auto;
        overflow: hidden;
        clear: both;
        transition: all 0.5s ease;
        .section {
          float: left;
          width: calc(33.33% - 0.4rem);
          margin: 0.1rem 0.2rem;
          height: 0.6rem;
          display: flex;
          justify-content: flex-start;
          padding-left: 0.3rem;
          align-items: center;
          border-radius: 0.04rem;
          background-color: rgba($color: #ebeef5, $alpha: 0.7);
          font-size: 0.2rem;
        }
      }
    }
  }
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  header {
    position: absolute;
    left: 0;
    right: 0;

    top: 0;
    height: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0 0.2rem 0 0.1rem;
    border-bottom: 1px solid #e4e7ed;
    .til {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 0.26rem;
      font-weight: 400;
      text-indent: 12px;
      color: rgba($color: #303133, $alpha: 1);
    }
    i {
      font-size: 16px;
      font-weight: 600;
      transition: all 0.5s ease;
    }
    i:hover {
      color: red;
      transform: rotate(90deg);
      font-size: 20px;
      font-weight: 800 !important;
    }
  }
  section::-webkit-scrollbar {
    display: none;
  }
  footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.8rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
    border-top: 1px solid #e4e7ed;
    // 全局筛选
    .total_screen {
      position: absolute;
      margin: 0 0.2rem;
      font-weight: 600;
      cursor: pointer;
      color: #307ef2;
      i {
        font-weight: 800;
        margin: 0 0.1rem 0 0;
      }
    }
    .total_screen:nth-child(1) {
      left: 0;
    }
    .total_screen:nth-child(2) {
      left: 2rem;
    }
    .btn {
      margin: 0 0.2rem;
    }
  }
}
</style>
